iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

react.js 的學習筆記 (沒在用硬要學系列 第 9

day 9 其他bind() 的使用方式

  • 分享至 

  • xImage
  •  

以下列為例,.bind(),它是用來傳值給goClick()

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0
      }


    goClick(e){
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>YES</button>
            </div>
        )
    }
}

第一個方式

使用生命週期來定義他,這個方式比較麻煩

import React, { Component } from 'react'

export default class App2 extends Component {

    constructor(props) {
        super(props);
        this.goClick = this.goClick.bind(this);
      }

      state = {
        gonum : 0
      }

    goClick(e){
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick}>YES</button>
            </div>
        )
    }
}

第二個方式

使用箭頭函數來傳值,這個方式寫起來比較方便

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0
      }

    goClick(e){
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={()=>this.goClick}>YES</button>
            </div>
        )
    }
}

第三個方式

將goClick()寫成箭頭函數,這樣一樣沒問題,就看習慣哪個方式

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0
      }

    goClick=(e)=>{
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick}>YES</button>
            </div>
        )
    }
}

上一篇
day 8 事件與state的說明(組件狀態)
下一篇
day 10 react Hooks 使用
系列文
react.js 的學習筆記 (沒在用硬要學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言